<template>
  <wf-el-drawer title="充值回款" :visible.sync="visible" size="580px" :wrapper-closable="false">
    <el-form ref="form" :model="form" label-width="160px" :rules="rules">
      <el-form-item label="付款方式：">对公转账</el-form-item>
      <div class="care-card-drawer-box">
        <el-form-item label="收款银行账户名称：">安徽尚礼信息科技有限公司</el-form-item>
        <el-form-item label="收款账号：">553900639610601</el-form-item>
        <el-form-item label="银行名称：">招商银行</el-form-item>
        <el-form-item label="开户行：">招商银行股份有限公司芜湖新时代支行</el-form-item>
      </div>
      <el-form-item label="充值金额：" prop="amount">
        <el-input v-model="form.amount" placeholder="请填写充值金额"></el-input>
      </el-form-item>
      <el-form-item label="转账凭证号/流水号：" prop="voucherNo">
        <el-input
          v-model.trim="form.voucherNo"
          placeholder="请填写付款凭证号"
          :maxlength="100"
        ></el-input>
      </el-form-item>
      <el-form-item ref="uploadImg" label="上传打款凭证：" prop="filePathVo">
        <el-upload
          action="customUpload"
          list-type="picture-card"
          :before-upload="beforeUpload"
          :on-preview="onPicturePreview"
          :on-remove="onPictureRemove"
          :file-list="fileList"
          :limit="5"
          class="upload-picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="imgVisible" append-to-body :modal="false">
          <img width="100%" :src="showImgUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <div class="care-card-drawer-note">
        <p>提交转账信息后，工作人员会在1个工作日内审核并联系您。</p>
        <p>审核通过后，您的账户欠费回款将会记录并扣除对应金额的充值款。</p>
        <p>发票：每月5号之前，运营人员会与您核对账单，并开具对应消费结束后的金额 票据。</p>
      </div>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">完成转账</el-button>
    </div>
  </wf-el-drawer>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { rechargeMoney } from '@/api/careCard';
  import { uploadImg } from '@/api/upload';
  import { isCertificateImg, isMoney } from '@/utils/regExpUtil';

  export default {
    data() {
      const validateAmount = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入充值金额'));
          return;
        }
        if (!isMoney(value)) {
          callback(new Error('支持数字，小数点后两位'));
          return;
        }
        callback();
      };
      const validateFilePathVo = (rule, value, callback) => {
        const len = (Array.isArray(value) && value.length) || 0;
        // const MaxLen = 5;
        if (len === 0) {
          callback(new Error('请上传打款凭证'));
          return;
        }
        callback();
      };
      return {
        visible: false,
        showImgUrl: '',
        imgVisible: false,
        fileList: [],
        form: {
          amount: '',
          filePathVo: [],
          organizationId: 0,
          organizationName: '',
          voucherNo: '',
          payType: '对公转账',
        },
        rules: {
          amount: [{ required: true, validator: validateAmount, trigger: 'change' }],
          voucherNo: [{ required: true, message: '请输入付款凭证号', trigger: 'change' }],
          filePathVo: [{ required: true, validator: validateFilePathVo, trigger: 'change' }],
        },
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      isClient() {
        return !!this.userInfo.isClient || false;
      },
    },
    methods: {
      open(data) {
        const { organizationId, organizationName } = data;
        this.form = { ...this.form, organizationId, organizationName };
        this.visible = true;
        this.fileList = [];
        this.form.filePathVo = [];
      },
      cancel() {
        this.$refs['form'].resetFields();
        this.visible = false;
        this.fileList = [];
        this.form.filePathVo = [];
      },
      save() {
        this.$refs['form'].validate(async valid => {
          if (valid) {
            await rechargeMoney(this.form);
            this.$emit('recharge-complite');
            this.cancel();
          }
        });
      },
      beforeUpload(file) {
        const isImg = isCertificateImg(file.name);
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isImg) {
          this.$message.error('支持格式：jpg、jpeg、png、bmp、gif');
        }
        if (!isLt5M) {
          this.$message.error('文件大小不超过5M');
        }
        if (isImg && isLt5M) {
          this.onUpload(file);
        }
        return false;
      },
      onUploadSuccess(response) {
        this.$refs['uploadImg'].clearValidate();
        const { data = null } = response;
        if (data) {
          this.fileList.push({
            name: data.originName,
            url: data.filePath,
          });
          this.form.filePathVo = this.fileList.map(item => ({
            filePath: item.url,
            fileName: name,
          }));
        }
      },
      onPictureRemove(file) {
        this.fileList = this.fileList.filter(item => item.url !== file.url);
        this.form.filePathVo = this.fileList.map(item => ({
          filePath: item.url,
          fileName: name,
        }));
      },
      onPicturePreview(file) {
        this.showImgUrl = file.url;
        this.imgVisible = true;
      },
      async onUpload(file) {
        let _flie = file;
        if (this.isClient) {
          const { electronReadFile } = require('@/utils/electronUpload');
          _flie = await electronReadFile(_flie.path);
        }
        const formData = new FormData(); //创建form对象
        formData.append('file', _flie);
        const res = await uploadImg(formData);
        this.onUploadSuccess(res);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .care-card-drawer-box {
    margin-left: 60px;
    margin-bottom: 24px;
    background: #f7f9fc;
    padding: 15px;
    border-radius: 5px;
  }
  .care-card-drawer-box-label {
    margin-bottom: 20px;
    font-weight: bold;
  }
  .care-card-drawer-note {
    color: #7f848b;
  }
</style>
<style lang="scss">
  .upload-picture-card {
    .el-upload-list--picture-card .el-upload-list__item {
      width: 80px;
      height: 80px;
    }
    .el-upload--picture-card {
      width: 80px;
      height: 80px;
      line-height: 86px;
    }
  }
</style>
